@import '~@angular/material/theming';

// always include only once per project
@include mat-core();

$my-app-primary: mat-palette($mat-blue-grey, 50, 300);

$my-app-accent: mat-palette($mat-amber, 500, 700, A100);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);

// use our theme with angular-material-theme mixin
@include angular-material-theme($my-app-theme);

// specify theme class eg: <body class="my-theme"> ... </body>

.alternate-theme {
    $alternate-primary: mat-palette($mat-grey, 800);
    $alternate-secondary:  mat-palette($mat-grey, 400);
  
    $alternate-theme: mat-light-theme($alternate-primary, $alternate-secondary);
  
    @include angular-material-theme($alternate-theme);
  }

  .volume-theme {
    $volume-primary: mat-palette($mat-light-green, A400);
    $volume-accent:  mat-palette($mat-amber, 500);
    $volume-warn:  mat-palette($mat-red, 500);
  
    $volume-theme: mat-light-theme($volume-primary, $volume-accent, $volume-warn);
  
    @include angular-material-theme($volume-theme);
  }